<template>
  <div class="enterprise-container">
    <div class="enterprise-header">
      <searchBox @detailSearch="goCompanydetail"></searchBox>
    </div>
    <div class="enterprise-body">
      <!--公司列表  -->
      <el-card
        class="box-card"
        v-loading="loading"
        :element-loading-text="loadingText"
      >
        <div
          class="descriptions-container"
          v-for="item in companyTableData"
          :key="item.id"
        >
          <!-- 采用动态路由 -->
          <el-link :underline="false" @click="goCompanydetail(item.cname)">{{
            item.cname
          }}</el-link>
          <el-descriptions style="height: 75px">
            <el-descriptions-item label="公司法人" span="3">{{
              item.lperson
            }}</el-descriptions-item>
            <el-descriptions-item label="注册资金">{{
              item.rmoney
            }}</el-descriptions-item>
            <el-descriptions-item label="公司地址">{{
              item.address
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <!-- 分页组件 -->
      <div style="height: 60px; margin-top: 15px; padding: 0 150px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import searchBox from '@/components/searchbox'
import { getCompanyListApi } from '@/api/company'
export default {
  name: 'SearchEnterprise',
  data () {
    return {
      companyTableData: [], // 公司信息数组
      page: 1,
      page_size: 10,
      total: 0,
      cname: '',
      loading: false,
      loadingText: ''
    }
  },
  created () {
    this.getCompanyList()
  },
  components: {
    searchBox
  },
  methods: {
    // 获取公司信息列表
    async getCompanyList () {
      this.loading = true
      this.loadingText = '数据正在加载中!'
      const { data } = await getCompanyListApi(this.page, this.page_size)
      // console.log(data)
      this.companyTableData = data.data.lists
      this.total = data.data.num
      this.loading = false
      this.loadingText = ''
    },
    // 切换第几页
    handleCurrentChange (val) {
      this.page = val
      this.getCompanyList()
    },
    // 手动更改页码
    handleSizeChange (val) {
      this.page_size = val
      this.getCompanyList()
    },
    // 页面跳转的函数
    goCompanydetail (val) {
      this.$router.push(`/enterprise/detail/${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.enterprise-container {
  margin-top: 0;
  .el-card {
    border: none;
    padding: 0 150px;
  }
  .enterprise-header {
    z-index: 1;
    width: 100%;
    position: fixed;
    left: 0;
    top: 60px;
    background-color: #e9eef3;
    padding: 25px;
    color: #333;
    text-align: center;
    ::v-deep .el-input__inner {
      height: 50px;
      border-radius: 0;
    }
    ::v-deep .el-input-group__append {
      border: none;
    }
  }
  .enterprise-body {
    background-color: #fff;
    .el-card {
      margin-top: 100px;
      // min-height: 500px;
      height: 702px;
      overflow: auto;
      // padding-bottom: 60px;
      ::v-deep .el-card__body {
        padding: 0;
      }
      .descriptions-container {
        .el-link {
          color: #409eff;
          font-size: 18px;
          margin-top: 20px;
          margin-bottom: 10px;
        }
        .el-descriptions {
          border-bottom: 1px solid #dcdfe6;
        }
      }
    }
  }
}
</style>
